
<template>
  <div class="combinedShipping">
    <div style="position: relative; z-index: 2">
      <u-lst-layOut :showNavbar="false" :navbarOption="{ bgColor: 'rgba(255,255,255,1)', title: '合并发货' }" :color="{ statusBarHeightColor: '#fff' }">
        <template v-slot:header>
          <uv-navbar :safeAreaInsetTop="true" leftIconSize="21px" leftIconColor="#0b0b0b" :titleStyle="{fontSize: '16px', lineHeight: '30px'}" :fixed="false" autoBack bgColor="#fff">
            <template v-slot:center>
              <div class="" style="text-align: center;padding-top:8px">
                <div class="" style="font-size: 16px;color: #303133;">合并发货</div>
                <div class="fz24 s09 lh1 bfff" style="color: #595757;text-align: center">仅展示待发货订单</div>
              </div>
            </template>
          </uv-navbar>
          <div class="bfff" style="min-height: 10rpx;border-bottom: 1px solid #EFEFEF"></div>
        </template>
        <template v-slot:main>
          <div class="p1758011488" style="height: 100%; overflow-y: auto">
            <scroll-view scroll-anchoring :refresher-triggered="isRefreshing" :refresher-enabled="true" scroll-y scroll-top="0" @refresherrestore="onRefresherRestore" @refresherrefresh="bindrefresherrefresh" @scrolltolower="onReachBottom" style="height: 100%">
              <div v-for="(item, index) in tableData" :key="index" class="mb20">
                <div class="f bfff pl30 pt30 pb30  aic " style="border-bottom: 1px solid #EFEFEF">
                  <div style="margin-left: -6rpx">
                    <uv-icon color="#333" size="42rpx" name="map"></uv-icon>
                  </div>
                  <div class="fz30 pl20">
                    <div>{{ item.address_name }} {{ item.address_tel }}</div>
                    <div style="width: calc(100vw - 120rpx)" class="single-line lh1 pt15">
                      <div class="dib">{{item.address_province}}</div>
                      <div class="dib">{{item.address_city}}</div>
                      <div class="dib">{{item.address_area}}</div>
                      <div class="dib">{{item.address_town}}</div>
                      <div class="dib">{{item.address_storey}}</div>
                      <div class="dib">{{item.address_house_number}}</div>
                    </div>
                  </div>
                </div>
                <div class="bfff   pl30  pr30">
                  <uv-checkbox-group @change="checkboxOrderInfoChange(index, item)" activeColor="#DE0012" shape="circle" iconSize="28rpx" size="32rpx" v-model="checkboxOrderInfo">
                    <uv-checkbox v-for="(item1, index1) in item.order_info" :key="index + '-' + index1" :name="String(item1.id)">
                      <div :style="{borderTop: index1 != 0 ? '1px solid #EFEFEF' : ''}" class="w100 pb30 pl10">
                        <u-lst-good :row="item1"></u-lst-good>
                      </div>
                    </uv-checkbox>
                  </uv-checkbox-group>
                </div>
                <div class="f aic bfff pl30 pr30 pt20 pb20 jcsb" style="border-top: 1px solid #EFEFEF">
                  <div class="fz30" style="color: #595757">已选{{item._orderNumTotal || 0}}个订单（共<div class="cD60012 dib">{{item._commodityNumTotal || 0}}</div> 件商品）</div>
                  <button @click="commonButtonTap(index)" class="common-button fz28 bD60012 ml0 mr0" style="width: 140rpx;height: 55rpx;color: #fff; border: 1rpx solid #D60012!important; ">合并发货</button>
                </div>
              </div>
              <div style="min-height: 30rpx"></div>
            </scroll-view>
          </div>
        </template>
        <template v-slot:footer>
        </template>
      </u-lst-layOut>
    </div>
  </div>
</template>
<script setup>

</script>
<script>
import myLayOutVue from "./components/layOut.vue";
import goodVue from "./components/good.vue";
import pageMixin from "./mixin/page.js";
import commonMixin from "./mixin/common.js";
import { mergeShipmentList } from "@/api/merchant.js";
import throttle from '@/uni_modules/uv-ui-tools/libs/function/throttle.js'
import debounce from '@/uni_modules/uv-ui-tools/libs/function/debounce.js'
export default {
  components: {
    "u-lst-layOut": myLayOutVue,
    "u-lst-good": goodVue,
  },
  mixins: [commonMixin, pageMixin],

  data() {
    return {
      checkboxOrderInfo: [],

      pageForm: {},
      chooseOrderForm: {},
      form: {
        page: 1,
        limit: 10,
      },
    };
  },

  onLoad() {
    this.initPage()
  },
  onHide() {
    this.isOnShow = true
  },
  onShow() {
    this.current_page = 0
    this.checkboxOrderInfo = []
    this.tableData = []
    if (this.isOnShow) this.initPage()
  },
  methods: {
    commonButtonTap(index) {
      if (!this.checkboxOrderInfo.length) return uni.$uv.toast('请选择商品')
      if (this.tableData[index]._commodityNumTotal < 2) return uni.$uv.toast('请选择多个商品')
      uni.removeStorage({ key: 'storageForm' });
      uni.setStorage({ key: 'storageForm', data: JSON.stringify(this.chooseOrderForm) });
      uni.navigateTo({ url: '/pages-merchant/shipment' });
    },
    checkboxOrderInfoChange(tableDataIndex, value) {
      this.chooseOrderForm = {}
      let num = 0
      let arr = []
      let obj = {}
      if (this.checkboxOrderInfo.length) {
        arr = value.order_info.filter((item, index) => {
          return this.checkboxOrderInfo.includes(String(item.id))
        })
        num = arr.length && arr.reduce((a, b) => a + b.cart_num, 0)
      }
      this.tableData.forEach((a, aI) => {
        this.$set(this.tableData[aI], '_orderNumTotal', aI == tableDataIndex ? this.checkboxOrderInfo.length : 0)
        this.$set(this.tableData[aI], '_commodityNumTotal', aI == tableDataIndex ? num : 0)
        if (aI == tableDataIndex) obj = JSON.parse(JSON.stringify(a))
      })
      obj.order_info = arr
      this.chooseOrderForm = obj
    },
    initPage(cb = () => { }) {
      this.isOnce = false;
      if (this.form.page == this.current_page) return;
      uni.showLoading({ title: "加载中", mask: true, });
      let form = JSON.parse(JSON.stringify(this.form));
      mergeShipmentList(form).then((res) => {
        this.isRefreshing = false;
        this.isOnce = true;
        if (res.code === 200) {
          cb();
          uni.hideLoading();
          let data =
            res.result &&
            res.result.data &&
            JSON.parse(JSON.stringify(res.result.data));
          this.total = res.result.total;
          this.current_page = res.result.current_page;
          this.tableData = this.tableData.concat(data);
          if (this.total <= this.tableData.length) this.status = "nomore";
        }
      })
        .catch(() => {
          uni.hideLoading();
          this.isRefreshing = false;
          this.isOnce = true;
        });
    },
  },
};
</script>
<style>
page {
  background-color: #F7F8F8;
  color: #333333;
  font-size: 28rpx;
}
</style><style lang="scss" scoped>
@import "./common.scss";

.combinedShipping {
  ::v-deep .p1758011488 {
    .combinedShipping-hidden {
      display: none;
    }
    // .p1758006210 {
    //   display: none !important;
    // }
    // .product_image {
    //   width: 80rpx !important;
    //   height: 80rpx !important;
    //   min-width: 80rpx !important;
    // }
    // .p1758006484 {
    //   padding-top: 10rpx !important;
    // }
    // .pay_price {
    //   display: none !important;
    // }
    // .p1758006645 {
    //   padding: 30rpx 30rpx 0 0 !important;
    //   font-size: 28rpx !important;
    // }
    // .good-color {
    //   color: #595757 !important;
    // }

    .product_name {
      max-width: calc(100vw - 365rpx) !important;
      min-width: calc(100vw - 365rpx);
    }
  }
}
</style>
